<template>
	<view class="page">
		<p class="welcome">欢迎使用~</p>
		<p class="login-title">用户登录</p>
		<input type="text"  placeholder="手机号" maxlength="11" v-model="phoneNum"/>
		<input type="password"  placeholder="密码" maxlength="11" v-model="password"/>
		<view class="login-item">
			<p>我已阅读并同意<a href="#">用户手册</a>和<a href="">隐私政策</a></p>
		</view>
		<view class="login-btn" @click="loginForm">
			立即登录
		</view>
		<view class="login-view">
			<p>还没账号？<a href="">立即注册</a></p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNum:"",
				password:""
			}
		},
		methods: {
			loginForm(){
				// 组合数据
				let obj={
					phoneNum:this.phoneNum,
					password:this.password
				}
				console.log(obj);
				//判断输入的是否为空
				if(!this.phoneNum.trim() || !this.password.trim()){
					// 提示消息
					uni.showToast({
						title:"不能为空"
					})
					return
				}
				//提交数据
				uni.request({
					url:"http://8.140.198.52:8001/api/webapi/login",
					method:"POST",
					data:obj,
					success:(res)=>{
						console.log(res,"登录返回的数据");
						uni.showToast({
							title:"登录成功"
						})
						// 跳转页面
						setTimeout(()=>{
							//跳转到首页 使用switchTab 因为首页是tabber页面所以需要switchTab来跳转
							uni.switchTab({
								url:"/pages/index/index"
							})
						},800)
						// 把返回的token和userInfo存到本地 使用uni.setStorageSync
						uni.setStorageSync("name","杜兵兵")
						uni.setStorageSync("token",res.data.token)
						uni.setStorageSync("userInfo",res.data.userInfo)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	background: linear-gradient(#b2cfed,#ffffff);
	width: 100%;
	height: 100vh;
	.welcome {
		font-size: 36rpx;
		font-weight: bold;
		width: 100%;
		height: 40rpx;
		link-height: 40rpx;
		//background-color: pink;
		padding-left: 15rpx;
	}
	.login-title{
		font-size: 30rpx;
		font-weight: bold;
		width: 100%;
		height: 40rpx;
		padding-left: 15rpx;
		margin: 100rpx 0 50rpx 0;
	}
	input {
		width: 85%;
		height: 80rpx;
		background-color: #ffffff;
		margin: 50rpx auto 10rpx ;
		padding-left: 15rpx;
		border: 1px solid #b5c2cb;
		border-radius: 40rpx;
	}
	.login-item {
		color: #9ba2ac;
		font-size: 25rpx;
		font-weight: bold;
		padding-left: 60rpx;
		margin:40rpx auto 100rpx;
	}
	.login-item p a {
		color: #8da9df;
		display: inline;
	}
	.login-btn {
		width: 85%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #a7c5fb;
		margin:  80rpx auto 0;
		border-radius: 40rpx;
		color: #ffffff;
	}
	.login-view {
		font-size: 25rpx;
		font-weight: blod;
		text-align: center;
		margin-top: 30rpx;
	}
	.login-view p a {
		color: #8da9df;
		display: inline;
	}
	
}
</style>
